<template>
  <div class="coach-reviews">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>教练评价</span>
          <el-select v-model="selectedCoach" placeholder="选择教练" clearable filterable>
            <el-option
              v-for="coach in coaches"
              :key="coach.id"
              :label="coach.name"
              :value="coach.id"
            >
              <span>{{ coach.name }}</span>
              <span class="coach-info">{{ getCoachTypeText(coach.type) }}</span>
            </el-option>
          </el-select>
        </div>
      </template>

      <!-- 评价概览 -->
      <div class="review-overview" v-if="selectedCoach">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="overview-card total-score">
              <div class="score-value">4.8</div>
              <div class="score-title">总体评分</div>
              <div class="score-stars">
                <el-rate
                  v-model="overallScore"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </div>
              <div class="review-count">共 126 条评价</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="overview-card score-distribution">
              <div class="distribution-title">评分分布</div>
              <div class="distribution-item" v-for="item in scoreDistribution" :key="item.score">
                <span class="score-label">{{ item.score }}星</span>
                <el-progress
                  :percentage="item.percentage"
                  :color="item.color"
                  :show-text="false"
                />
                <span class="percentage">{{ item.percentage }}%</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="overview-card score-dimensions">
              <div class="dimensions-title">评分维度</div>
              <div class="dimension-item" v-for="item in scoreDimensions" :key="item.name">
                <span class="dimension-label">{{ item.name }}</span>
                <el-rate
                  v-model="item.score"
                  disabled
                  :max="5"
                  :colors="dimensionColors"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 评价列表 -->
      <div class="review-list">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="评分">
            <el-select v-model="searchForm.score" placeholder="选择评分" clearable>
              <el-option label="5星" value="5" />
              <el-option label="4星" value="4" />
              <el-option label="3星" value="3" />
              <el-option label="2星" value="2" />
              <el-option label="1星" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              v-model="searchForm.keyword"
              placeholder="评价内容/学员姓名"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="review-items">
          <div v-for="review in reviews" :key="review.id" class="review-item">
            <div class="review-header">
              <div class="reviewer-info">
                <el-avatar :size="40" :src="review.avatar" />
                <div class="reviewer-detail">
                  <div class="reviewer-name">{{ review.studentName }}</div>
                  <div class="review-time">{{ review.createTime }}</div>
                </div>
              </div>
              <div class="review-score">
                <el-rate v-model="review.score" disabled />
              </div>
            </div>
            <div class="review-content">{{ review.content }}</div>
            <div class="review-images" v-if="review.images && review.images.length">
              <el-image
                v-for="(image, index) in review.images"
                :key="index"
                :src="image"
                :preview-src-list="review.images"
                fit="cover"
                class="review-image"
              />
            </div>
            <div class="review-reply" v-if="review.reply">
              <div class="reply-title">教练回复：</div>
              <div class="reply-content">{{ review.reply }}</div>
              <div class="reply-time">{{ review.replyTime }}</div>
            </div>
            <div class="review-actions" v-else>
              <el-button type="primary" link @click="handleReply(review)">回复</el-button>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 回复抽屉 -->
      <el-drawer
        v-model="replyDialogVisible"
        title="回复评价"
        direction="rtl"
        size="500px"
      >
        <el-form :model="replyForm" ref="replyFormRef">
          <el-form-item
            label="回复内容"
            prop="content"
            :rules="[{ required: true, message: '请输入回复内容', trigger: 'blur' }]"
          >
            <el-input
              v-model="replyForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入回复内容"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="replyDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitReply">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 教练列表
const coaches = [
  { id: '1', name: '李教练', type: 'subject2' },
  { id: '2', name: '王教练', type: 'subject3' }
]
const selectedCoach = ref('')

// 获取教练类型文本
const getCoachTypeText = (type) => {
  const typeMap = {
    'subject2': '科目二教练',
    'subject3': '科目三教练',
    'theory': '理论教练'
  }
  return typeMap[type] || type
}

// 总体评分
const overallScore = ref(4.8)

// 评分分布
const scoreDistribution = [
  { score: 5, percentage: 85, color: '#67c23a' },
  { score: 4, percentage: 10, color: '#409eff' },
  { score: 3, percentage: 3, color: '#e6a23c' },
  { score: 2, percentage: 1, color: '#f56c6c' },
  { score: 1, percentage: 1, color: '#909399' }
]

// 评分维度
const dimensionColors = ['#ff9900', '#ff9900', '#ff9900']
const scoreDimensions = [
  { name: '教学态度', score: 4.9 },
  { name: '教学水平', score: 4.8 },
  { name: '教学效果', score: 4.7 },
  { name: '沟通能力', score: 4.8 },
  { name: '准时程度', score: 4.9 }
]

// 搜索表单
const searchForm = ref({
  score: '',
  dateRange: [],
  keyword: ''
})

// 评价列表
const reviews = ref([
  {
    id: '1',
    studentName: '张三',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    score: 5,
    content: '李教练教学认真负责，讲解细致，让我很快就掌握了要领。特别是在练习倒车入库时，他的指导非常到位，帮助我克服了对倒车的恐惧心理。',
    images: [
      'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    ],
    createTime: '2024-03-14 15:30:00',
    reply: '感谢您的认可，我会继续努力提供更好的教学服务。',
    replyTime: '2024-03-14 16:00:00'
  },
  {
    id: '2',
    studentName: '李四',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    score: 5,
    content: '教练很耐心，对新手很友好，讲解很详细。',
    createTime: '2024-03-14 14:00:00'
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 回复对话框
const replyDialogVisible = ref(false)
const replyFormRef = ref(null)
const replyForm = ref({
  reviewId: '',
  content: ''
})

// 搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

// 重置
const handleReset = () => {
  searchForm.value = {
    score: '',
    dateRange: [],
    keyword: ''
  }
  handleSearch()
}

// 回复评价
const handleReply = (review) => {
  replyForm.value = {
    reviewId: review.id,
    content: ''
  }
  replyDialogVisible.value = true
}

// 提交回复
const submitReply = async () => {
  if (!replyFormRef.value) return
  await replyFormRef.value.validate((valid) => {
    if (valid) {
      // 实现提交逻辑
      ElMessage.success('回复成功')
      replyDialogVisible.value = false
      fetchData()
    }
  })
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

// 获取数据
const fetchData = () => {
  total.value = reviews.value.length
}
</script>

<style scoped>
.coach-reviews {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coach-info {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.review-overview {
  margin-bottom: 30px;
}

.overview-card {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  height: 100%;
}

.total-score {
  text-align: center;
}

.score-value {
  font-size: 48px;
  font-weight: bold;
  color: #ff9900;
  line-height: 1;
  margin-bottom: 8px;
}

.score-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 16px;
}

.score-stars {
  margin-bottom: 8px;
}

.review-count {
  color: #909399;
  font-size: 14px;
}

.distribution-title,
.dimensions-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 16px;
}

.distribution-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.score-label {
  width: 40px;
  margin-right: 8px;
}

.el-progress {
  flex: 1;
  margin-right: 8px;
}

.percentage {
  width: 40px;
  text-align: right;
}

.dimension-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.dimension-label {
  width: 80px;
  margin-right: 8px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.review-items {
  margin-bottom: 20px;
}

.review-item {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.reviewer-info {
  display: flex;
  align-items: center;
}

.reviewer-detail {
  margin-left: 12px;
}

.reviewer-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.review-time {
  color: #909399;
  font-size: 12px;
}

.review-content {
  margin-bottom: 16px;
  line-height: 1.6;
}

.review-images {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.review-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

.review-reply {
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  margin-top: 12px;
}

.reply-title {
  color: #409eff;
  font-weight: bold;
  margin-bottom: 8px;
}

.reply-content {
  margin-bottom: 8px;
  line-height: 1.6;
}

.reply-time {
  color: #909399;
  font-size: 12px;
}

.review-actions {
  margin-top: 12px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>